import { useIntersectionObserver } from '@vueuse/core'

// //自定义插件 图片懒加载 图片进入可视区才加载
export const lazyPlugin = {
    install(app, options) {
        // 配置此应用
        //懒加载指令逻辑
        app.directive('img-lazy', {
            mounted(el, binding) {
                //el:指令绑定的元素
                //binding:指令绑定的值 图片url
                useIntersectionObserver(
                    el,
                    ([{isIntersecting}]) => {
                      //isIntersecting:是否进入可视区
                      if(isIntersecting){
                        el.src = binding.value
                        stop() //停止监听
                      }
                    },
                  )
            }
        })
      }
}